<%@ page contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<!DOCTYPE html>
<html>
<head>
  <title>第一个Web应用</title>
  <link rel="icon" href="images/logo.jpg" />
  <link rel="stylesheet" href="css/main.css"> <!-- 引入外部 CSS -->
  <script type="application/javascript">
    function changeColor(){
      //获取页面元素，需要借助于js引擎内核提供的一些功能
      //dom(document） let（局部） var（全局） const
      //let用于声明变量
      let p = document.getElementById("p1");
      p.style.color = "red";
    }
  </script>
</head>
<body>
<h1 align="center" title="鼠标悬浮到标签上，可以出现提示信息">Java Web</h1>
<input type="button" value="更改段落文本颜色" onclick="changeColor()">
<p id="p1">
  Java Web 学习！！！
</p>
<p id="p2">
  第二个段落p的内容！！
</p>
<a href="https://www.baidu.com" target="_blank">访问百度</a>

<table>
  <tr><th>序号</th><th>名称</th><th>产地</th><th>供应商</th><th>联系电话</th><th>商品样例</th></tr>
  <tr><td>1</td><td>苹果</td><td>陕西洛川县</td><td>陕西果品销售有限公司</td><td>13212341234</td><td><img src="images/apple.jpg" width="100px"></td></tr>
  <tr><td>2</td><td>苹果</td><td>陕西洛川县</td><td>陕西果品销售有限公司</td><td>13212341234</td><td><img src="images/apple.jpg" width="100px"></td></tr>
  <tr><td>3</td><td>苹果</td><td>陕西洛川县</td><td>陕西果品销售有限公司</td><td>13212341234</td><td><img src="images/apple.jpg" width="100px"></td></tr>
  <tr><td>4</td><td>苹果</td><td>陕西洛川县</td><td>陕西果品销售有限公司</td><td>13212341234</td><td><img src="images/apple.jpg" width="100px"></td></tr>
  <tr><td>5</td><td>苹果</td><td>陕西洛川县</td><td>陕西果品销售有限公司</td><td>13212341234</td><td><img src="images/apple.jpg" width="100px"></td></tr>
</table>
</body>
</html>